body{
  /*color: #0ac1c7;
  font-size:0.8rem;*/

  width:100%;
  height:100vh;
  background:url(../pic/bg.png) no-repeat;
  background-size:cover;


}
ul{
  padding: 0;
}
.color_lightblue{
  color:#376f84;
}
.color_blue{
  color:#65c6e7;
}

.color_green{
  color:#04ba19;
}
.tiny{
  font-size:0.5rem;
}

.small{
  font-size:0.9rem;
}
.normal{
  font-size:1rem;
}
.middle{

  font-size:1.2rem;}

.big{
  font-size:2.0rem;
}
.bold{
  font-weight:bold;}

.colorful{

  width: 25%;
  font-size: 2.2rem;
  font-family: Sans-serif;
  background-image:
    -webkit-gradient( linear, left top, right top,
    color-stop(0, #03b3ff),
    color-stop(0.5, #00c8fc),
    color-stop(1, #0064fd) );
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  font-weight:bold;

}

.italic{
  font-style:italic
}
/*flex布局*/
.flex{
  display: -webkit-flex;
  display: flex;
}
.flex_row{
  display: -webkit-flex;
  display: flex;
  flex-direction: row ;
  justify-content:center;
  align-items:center;

}
.flex_column{
  display: -webkit-flex;
  display: flex;
  flex-direction: column ;
  justify-content:center;
  align-items:center;

}

#app{
  width:100%;
  height:100vh;

}
/*header部分*/
#header{
  width:100%;
  height:15vh;
  display:flex;
  align-items:center;
  justify-content:center;

}
/*center部分*/
#center{
  width:100%;
  height:56vh;
  background:url(../pic/center_bg.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;

}
/*bottom部分*/
#bottom{
  width:96%;
  height:25vh;
  display:flex;
  justify-content:space-between;
}
/*header_up部分*/
#header_up{
  height:60%;
  width:100%;
  background-image:url(../pic/header_up.png);
  background-size:100% 100%;
  text-align:center;
  display:flex;
  vertical-align:middle;
  justify-content:space-between;
  align-items:center;

}
/*标题两侧*/
#header_up .side{

  height:100%;
  width:10%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-bottom:1%;
  cursor:pointer;
}
/*标题下方*/
#header_down{
  width:96%;
  height:40%;
  display:flex;
  align-items: flex-end;
  margin-top:0.2%;
}
/*设备总数*/
#header_down #exp{

  width:25%;
  height:150%;
  background:url(../pic/left_bg.png);
  background-size:100% 100%;
  justify-content: flex-start ;
  align-items:center;
  alignContent:flex-start;
  /*align-self:flex-end;*/
}
#exp .box{
  width:100%;
  height:50%;
  display:flex;
  padding-left:15%;
  justify-content:flex-start;
  align-items:center;
}
/*标题下方--中间部分*/

#header_down .down_center{

  width:50%;
  height:100%;
  background:url(../pic/header_down.png);
  background-size:100% 100%;
  background-position:bottom;
}
/*标题下方--两侧部分*/
#header_down .down_center .dcenter_side{
  width:33%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  vertical-align:bottom;
}

#header_down .down_center .dcenter_side:first-child
{
  justify-content:flex-end;

}
#header_down .down_center .dcenter_side:last-child
{
  justify-content:flex-start;
}


/*设备贡献值*/
#header_down #cont{
  width:25%;
  height:160%;
  background:url(../pic/right_bg.png);
  background-size:100% 80%;
  background-position:center top;
  background-repeat:no-repeat;
}

/*设备贡献值标题*/
#cont .cont_up{
  text-align:right;
  padding-right:10%;
  width:80%;
  height:25%;
}
/*设备贡献值标题--下方*/
#cont .cont_down{
  width:100%;
  height:70%;
}
/*设备贡献值标题--下方三列*/
 .cont_down .cont_box{
  width:30%;
  height:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;

}

 .cont_box .box_pic{
  margin-top:5%;
  height:40%;
  width:auto;

}

 .cont_box .box_text{
  height:35%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-bottom:3%;

}



/*引入百度地图*/
#allmap{
  width:95.4%;
  height:87%;
  overflow:hidden;


}
/*warn_box*/
#warn_box{
  position:absolute;
  top:10%;
  left:3%;
  height:7%;
  width:18%;
  background:url(../pic/warn_box.png);
  background-repeat:no-repeat;
  background-size:99.9% 99.9%;
  display:flex;
  justify-content:space-around;
  align-items:center;

}

#warn_box .tity_box{
  width:30%;
  height:100%;

  display:flex;
  align-items:center;
  padding-left:5%;
  color:#65c6e7;
}


.red_box{
  height:10px;
  width:10px;

  border-radius:5px;
  background-color:red;

}

.blue_box{
  height:10px;
  width:10px;

  border-radius:5px;
  background-color:blue;

}

.grey_box{
  height:10px;
  width:10px;

  border-radius:5px;
  background-color:grey;

}
/*提醒框---带箭头*/
#arrow_box{
  color:#aab2c4;
  display: inline-block;
  height: 170px;
  width: 310px;
  text-align: center;
  border-radius: 5px;
  margin-left: 32px;
  vertical-align: top;
  background-color: #234478;
  position:absolute;
  opacity:0.8;
  text-align:left;
  visibility:hidden;

}
.arrow {
  width: 0px;
  height: 0px;

  border-bottom:10px solid transparent;
  border-top:10px solid #234478;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  position:absolute;
  margin-left:90px;
  margin-top:170px;


}
/*详细信息*/
#arrow_box .tab_content{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top:0.1%;
  padding-left:1%;
  padding-right:1%;

  font-size:0.1rem;
  line-height:1rem;

}
.tab_content .tab_box{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  margin-bottom:1.5%;
  width:49%;
}

.lamp_pic{
  position:absolute;
  width:1%;
  height:4%;
  left:48%;
  top:70%;
  cursor:pointer;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;

}

.lamp_pic ul li{
  list-style:none;

}
.lamp_pic img{
  width:40%;
  height:90%;

  margin-left:10%;

}
#lamp_pic  .lamp_logo{
  width:40%;
  height:100%;


}
/*图标部分*/
.lamp_logo .red_logo{
  width:100%;
  height:18%;
  background-color:red;

}

.lamp_logo .green_logo{
  width:100%;
  height:18%;
  background-color:green;
}

.lamp_logo .blue_logo{
  width:100%;
  height:18%;
  background-color:blue;
}

.lamp_logo .yellow_logo{
  width:100%;
  height:18%;
  background-color:yellow;
}

.lamp_logo .orange_logo{
  width:100%;
  height:18%;
  background-color:orange;
}

.lamp_logo .purple_logo{
  width:100%;
  height:18%;
  background-color:purple;
}



/*bottom部分下面的bottom_box*/
#bottom .bottom_box{
  width:24%;
  height:100%;

}

/*bottom_title*/
#bottom .bottom_box .bottom_title{
  width:100%;
  height:23%;
  background:url(../pic/bottom_title.png);
  background-size:100% 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
/*bottom_title*/
#bottom .bottom_box .bottom_title .title_box{
  width:30%;
  height:100%;
  display:flex;
  align-items:center;
  padding-left:5%;
}
/*bottom_content*/
#bottom .bottom_box .bottom_content{
  width:100%;
  height:95%;
  bottom:0;
  overflow:hidden;
}


 #sensor_title{
  width:100%;
  height:20%;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.sensor_box{
  height:100%;
  width: 50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#17cde9;

}
 #sensor_list{
  width:100%;
  height:80%;
  color:#1ae0fe;
  overflow:hidden;

}
#sensor_list ul{
  padding: 0;
}
.inner-container{
  width: 100%;
  height: 100%;

}
.inner-container li{
  width:100%;
  height:20%;

}
.inner-container  li span{

  text-align: center;
  height: 100%;
  width: 50%;
}

#sensor_list li:nth-child(2n+1){
  background-color:#037687;
}
/*传感器文字滚懂*/

.inner-container {
  animation: myMove 5s linear infinite;
  animation-fill-mode: forwards;
}

/*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-80%);
  }
}

/*vue*/
.ant-drawer{
  color:red
}
/*定义盒子标题颜色*/
.ant-drawer-title {

  color:#1883d1;
  font-size: 1.2rem;

}

/*定义tab标题下划线颜色*/
.ant-tabs-nav-container {
  border-bottom:1px solid #06264d;

}
/*tab标题字体*/
.ant-tabs .ant-tabs-small-bar .ant-tabs-tab {
  font-size: 1.0rem;
}

/*整个drawer的透明度*/
.ant-drawer-content-wrapper{
  opacity: 0.9;
}

.ant-drawer-wrapper-body{
  background-color: #06264d;
}
/*定义箭头的颜色*/
.ant-tabs-tab-prev.ant-tabs-tab-arrow-show, .ant-tabs-tab-next.ant-tabs-tab-arrow-show {
  color: #65c6e7;
}
/*定义X号的颜色*/
.ant-drawer-close {
  color: #65c6e7;
}
